<template>
  <div class="layui-container fly-marginTop">
    <div class="fly-panel" pad20 style="padding-top: 5px;">
      <!--<div class="fly-none">没有权限</div>-->
      <div class="layui-form layui-form-pane">
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li class="layui-this">发表新帖<!-- 编辑帖子 --></li>
          </ul>
          <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
            <div class="layui-tab-item layui-show">
              <ValidationObserver ref="observer" v-slot="{validate}">
                <form>
                  <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-md3">

                      <label class="layui-form-label">所在专栏</label>
                      <div class="layui-input-block" @click="changeSelect(1)">
                        <ValidationProvider name="catalog" rules="required|is_not:请选择" v-slot="{errors}">
                        <div class="layui-unselect layui-form-select" :class="{'layui-form-selected': isSelect}">
                        <div class="layui-select-title">
                          <input type="text" placeholder="请选择" readonly v-model="catalogList[catalogIndex].name" class="layui-input layui-unselect" />
                          <i class="layui-edge"></i>
                        </div>
                        <dl class="layui-anim layui-anim-upbit">
                          <dd v-for="(item,index) in catalogList" :key="'catalog'+index" :class="{'layui-this':index===catalogIndex}" @click="chooseCatalog(item,index)">{{item.name}}</dd>
                        </dl>
                      </div>
                      <div class="form-error">{{errors[0]}}</div>
                      </ValidationProvider>
                      </div>

                    </div>
                    <div class="layui-col-md9">
                      <ValidationProvider name="title" rules="required" v-slot="{errors}">
                      <label for="L_title" class="layui-form-label">标题</label>
                      <div class="layui-input-block">
                        <input type="text" id="L_title" v-model="title" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
                        <!-- <input type="hidden" name="id" value="{{d.edit.id}}"> -->
                      </div>
                      <div class="form-error">{{errors[0]}}</div>
                      </ValidationProvider>
                    </div>
                  </div>
                  <Editor :initContent="content" @add="getContent"></Editor>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">悬赏飞吻</label>
                      <div class="layui-input-inline" @click="changeSelect(2)">
                        <div class="layui-unselect layui-form-select" :class="{'layui-form-selected': isSelectFav}">
                        <div class="layui-select-title">
                          <input type="text" placeholder="请选择" readonly v-model="favList[favIndex]" class="layui-input layui-unselect" />
                          <i class="layui-edge"></i>
                        </div>
                        <dl class="layui-anim layui-anim-upbit">
                          <dd v-for="(item,index) in favList" :key="'fav'+index" :class="{'layui-this':index===favIndex}" @click="chooseFav(item,index)">{{item}}</dd>
                        </dl>
                      </div>
                      </div>
                      <div class="layui-form-mid layui-word-aux">发表后无法更改飞吻</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <ValidationProvider name="code" rules="required|length:4" v-slot="{errors}">
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="code"
                          v-model="code"
                          placeholder="请输入标题"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <span class="svg" @click="getCaptcha()" v-html="svg"></span>
                      <div class="form-error">{{errors[0]}}</div>
                    </ValidationProvider>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn" type="button" @click="validate().then(submit)">立即发布</button>
                  </div>
                </form>
              </ValidationObserver>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/modules/editor'
import mixin from '@/mixin/code'
import { sendPost } from '@/api/content'
export default {
  mixins: [mixin],
  name: 'add',
  components: {
    Editor
  },
  data () {
    return {
      isSelect: false,
      isSelectFav: false,
      catalogIndex: 0,
      favIndex: 0,
      code: '',
      svg: '',
      catalogList: [
        {
          name: '请选择',
          value: ''
        },
        {
          name: '提问',
          value: 'ask'
        },
        {
          name: '分享',
          value: 'share'
        },
        {
          name: '讨论',
          value: 'discuss'
        },
        {
          name: '建议',
          value: 'advise'
        }
        // {
        //   name: '动态',
        //   value: 'logs'
        // },
        // {
        //   name: '公告',
        //   value: 'notice'
        // }
      ],
      title: '',
      content: '',
      favList: [20, 30, 50, 60, 80]
    }
  },
  mounted () {
    let data = localStorage.getItem('postData')
    if (data) {
      this.$confirm('检测到有未提交的数据，是否要继续编辑？', () => {
        data = JSON.parse(data)
        this.content = data.content
        this.title = data.title
        this.catalogIndex = data.catalogIndex
        this.favIndex = data.favIndex
      }, () => {
        localStorage.removeItem('postData')
      })
    }
  },
  methods: {
    changeSelect (val) {
      if (val === 1) {
        this.isSelect = !this.isSelect
      } else {
        this.isSelectFav = !this.isSelectFav
      }
    },
    chooseCatalog (item, index) {
      this.catalogIndex = index
    },
    chooseFav (item, index) {
      this.favIndex = index
    },
    getContent (content) {
      this.content = content
      if (this.content.trim() !== '' && this.title.trim() !== '') {
        const data = {
          content: this.content,
          title: this.title,
          catalogIndex: this.catalogIndex,
          favIndex: this.favIndex
        }
        localStorage.setItem('postData', JSON.stringify(data))
      }
    },
    async submit () {
      const valid = await this.$refs.observer.validate()
      if (!valid) {
        return
      }
      const data = {
        sid: this.$store.state.sid,
        content: this.content,
        code: this.code,
        title: this.title,
        catalog: this.catalogList[this.catalogIndex].value,
        favs: this.favList[this.favIndex]
      }
      const res = await sendPost(data)
      if (res.code === 200) {
        localStorage.removeItem('postData')
        this.$pop('', res.msg)
        setTimeout(() => {
          this.$router.push({
            name: 'detail',
            params: {
              tid: res.data._id
            }
          })
        }, 1000)
      } else {
        this.$pop('shake', res.msg)
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
